<template>
  <div class="moneyBack orderLayout">
    <div class="content">
        <div>
          <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/card.png" class="card">
        </div>
        <div class="shadowBox">
          <div>
            <p>姓名</p>
          </div>
          <div>
            <input type="text" name="" v-model="accountName">
          </div>
        </div>
        <div class="shadowBox">
          <div>
            <p>账号</p>
          </div>
          <div>
            <input type="number" name="" v-model="accountBank">
          </div>
        </div>
        <div class="shadowBox">
          <div>
            <p>开户行</p>
          </div>
          <div>
            <input type="text" name="" v-model="accountNumber">
          </div>
        </div>
        <div style="text-align: center;margin-top: 1.3rem;">
          <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/apply.png" style="width: 15.3rem;" @click="submit()">
          <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/invite.png" class="handleBtn" @click="share()">
        </div>
    </div>
    <share-pop :show.sync = "showPop"></share-pop>
  </div>
</template>
<script>
import { Toast, Indicator, MessageBox } from 'mint-ui';
import { checkZhName, checkBankNum } from "common/utils"
import { postMoneyBack, getRedeemReward } from "api/moneyBack"
import sharePop from "components/sharePop"
import { wxshare } from 'common/mixin'

export default {
  mixins: [wxshare],
  data() {
    return {
      point: 0,
      accountBank: "",
      accountName: "",
      accountNumber: "",
      redeemRewardlist: [],
      showPop:false
    }
  },
  computed: {
    show: function() {
      if (this.redeemRewardlist.length > 0) {
        return true
      } else {
        return false
      }
    }
  },
  components:{sharePop},
  methods: {
    // getRedeemRewardList() {
    //   getRedeemReward().then((data) => {
    //     this.redeemRewardlist = data.data.beanList;

    //   }, (msg) => {

    //   })
    // },
    share:function(){
      this.showPop = true;
    },
    submit() {
      if (this.btnDisable) return false;
      this.btnDisable = true;
      if (!checkZhName(this.accountName)) {
        Toast('请输入正确的姓名,名称为2-4位汉字');
        this.btnDisable = false;
        return false
      } else if (!(this.accountNumber.length > 1)) {
        Toast('请输入正确的开户行', '温馨提示');
        this.btnDisable = false;
        return false
      } else if (!checkBankNum(this.accountBank)) {
        Toast('请输入正确的银行卡号', '温馨提示');
        this.btnDisable = false;
        return false
      } else {
        Indicator.open();
        postMoneyBack({
          point: this.point,
          accountName: this.accountName,
          accountNumber: this.accountNumber,
          accountBank: this.accountBank,
        }).then((data) => {
          Indicator.close();
          MessageBox.alert('已提交申请，我们会尽快联系您。', '温馨提示').then(action => {
            this.$router.go(-1);
          });
        }, (msg) => {
          Indicator.close();
          MessageBox.alert(msg, '温馨提示').then(action => {
            this.$router.go(-1);
          });
        })
      }
    }

  },
  created() {
    // this.getRedeemRewardList();
  },
  mounted() {
    if (this.$router.currentRoute.query.point) {
      this.point = this.$router.currentRoute.query.point;
    } else {
      this.$router.replace('/score');
    }
  },
}
</script>
<style lang="less">
@import './moneyBack.less';
@import '../order/orderPre.less';
</style>
